<template>
  <div class="topology-page">
    <div class="page-header">
      <h3>云平台架构拓扑图</h3>
      <el-button type="primary" @click="dialogVisible = true">
        <el-icon class="btn-icon"><FullScreen /></el-icon>
        全屏查看
      </el-button>
    </div>

    <div class="topology-container">
      <TopologyMap :topology="cloudArchitecture" />
    </div>

    <TopologyDialog v-model="dialogVisible">
      <TopologyMap :topology="cloudArchitecture" />
    </TopologyDialog>
  </div>
</template>

<script setup>
import TopologyMap from '../components/TopologyMap.vue'
import TopologyDialog from '../components/TopologyDialog.vue'
import { ref } from 'vue'
import { FullScreen } from '@element-plus/icons-vue'

const dialogVisible = ref(false)

const cloudArchitecture = [
  {
    id: 'cloud-platform',
    label: '云平台总控制台',
    children: [
      {
        id: 'iaas',
        label: 'IaaS 层',
        children: [
          {
            id: 'compute',
            label: '计算资源',
            children: [
              { id: 'vm', label: '虚拟机服务' },
              { id: 'container', label: '容器服务' },
              { id: 'serverless', label: 'Serverless' }
            ]
          },
          {
            id: 'storage',
            label: '存储资源',
            children: [
              { id: 'block', label: '块存储' },
              { id: 'object', label: '对象存储' },
              { id: 'file', label: '文件存储' }
            ]
          },
          {
            id: 'network',
            label: '网络资源',
            children: [
              { id: 'vpc', label: 'VPC网络' },
              { id: 'cdn', label: 'CDN加速' },
              { id: 'slb', label: '负载均衡' }
            ]
          }
        ]
      },
      {
        id: 'paas',
        label: 'PaaS 层',
        children: [
          {
            id: 'middleware',
            label: '中间件服务',
            children: [
              { id: 'mq', label: '消息队列' },
              { id: 'cache', label: '缓存服务' },
              { id: 'db', label: '数据库服务' }
            ]
          },
          {
            id: 'dev-tools',
            label: '开发工具',
            children: [
              { id: 'ci-cd', label: 'CI/CD' },
              { id: 'monitor', label: '监控告警' },
              { id: 'api-gateway', label: 'API网关' }
            ]
          }
        ]
      }
    ]
  }
]
</script>

<style scoped>
.topology-page {
  background: white;
  border-radius: 8px;
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.topology-container {
  height: calc(100vh - 200px);
  border: 1px solid #eee;
  border-radius: 4px;
}

.btn-icon {
  margin-right: 8px;
}
</style>